<!-- 立即预约 -->
<template>
	<view class="box">
		<!-- 地址 -->
		<view class="box1">
			<address></address>
		</view>
		<!-- 宠物信息 -->
		<view class="box2">
			<view class="pet">宠物信息 <image class="pet1" src="/static/加.png" mode=""></image>
			</view>
			<view class="box21">
				<view class="bxo1left">
					<image src="/static/狗.png" mode="" />
				</view>
				<view class="bxo1right">
					<view class="bxo1right1">
						这是宠物名称
						<uv-icon name="trash" size="20px"></uv-icon>
					</view>
					<view class="bxo1right2">
						狗狗
					</view>
				</view>
			</view>
			<view class="box22">
				<view class="">上门时间</view>
				<view style="color: #c0c0c0; display: flex; align-items: center;">请选择上门时间<uv-icon name="arrow-right"
						size="16px"></uv-icon></view>
			</view>
			<view class="box22">
				<view class="">合伙人推荐码</view>
				<view style="color: #c0c0c0; display: flex; align-items: center;">请填写合伙人推荐码(非必填)</view>
			</view>
		</view>

		<view class="box3">
			<view class="box31">
				<view class="bxo1left">
					<image src="https://picsum.photos/200/300" mode="" />
				</view>
				<view class="bxo1right">
					<view class="bxo1right1">
						服务名称服务名称
					</view>
					<view class="bxo1right2">
						￥80/次<view class="color">会员价￥56</view>
					</view>
				</view>

			</view>
			<view class="box22">
				<view class="">优惠券</view>
				<view style="color: #c0c0c0; display: flex; align-items: center;">请选择优惠券<uv-icon name="arrow-right"
						size="16px"></uv-icon></view>
			</view>
		</view>
		<!--  备注信息-->
		<view class="box4">
			<view class="">备注信息(150字以内)</view>
			<textarea placeholder="请输入" cols="30" rows="10"></textarea>
		</view>
		<!-- 支付方式 -->
		<view class="box4">
			<view class="">选择支付方式</view>
			<view class="box41">
				<view class="left">
					<view class="photo">
						<image src="/static/微信.png" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">微信支付</view>
				</view>
				<view class="right">
					<uv-radio-group>
						<uv-radio name="1" activeColor="#008c8c"></uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="box41">
				<view class="left">
					<view class="photo">
						<image src="/static/余额.png" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">余额支付</view>
				</view>
				<view class="right">
					<uv-radio-group>
						<uv-radio name="2" activeColor="#008c8c"></uv-radio>
					</uv-radio-group>

				</view>
			</view>
		</view>
		<!--  支付方式-->
		<view class="box5">
			<view class="box51">
				<view class="box51-left">
					<view>实付</view>
					<view style="color: red;display: flex; align-items: center;">￥<view style="font-size: 1.1rem;">200</view>
					</view>
				</view>
				<view class="box51-right">
					<button class="but">立即预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import address from "/A实训/项目/pet4/component/address/address.vue"
</script>

<style lang="scss">
	@import url("./booking.css");
</style>